<template>
  <div>
    <van-nav-bar title="shopcar" left-text="返回" left-arrow />
    <van-notice-bar text="新上夏季T恤杉，冬季羽绒服，春季风衣" left-icon="volume-o" />
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
      <div :key="item.id" v-for="(item) in GoodsList">
        <!-- SwipeCell 滑动单元格 -->
        <van-swipe-cell :before-close="beforeClose">
          <van-card
            :num="item.cou"
            :price="item.sell_price"
            :title="item.title"
            :thumb="item.thumb_path"
          />
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="onbtnclick(item.id)"
            />
          </template>
        </van-swipe-cell>
        <!-- 步进器+1-1 -->
        <van-row type="flex" justify="end">
          <van-stepper v-model="item.cou" @change="onChange" />
        </van-row>
      </div>
    </van-pull-refresh>
    <!-- 提交订单 -->
    <van-submit-bar
      :safe-area-inset-bottom="false"
      :price="total"
      button-text="提交订单"
      @submit="onSubmit"
      class="submitBar"
    />
    <!-- 购物车空空 -->
    <van-row type="flex" v-if="disabled" justify="center" class="shopcarNull">
      <van-col span="4">
        <van-icon name="cart" color="#1989fa" badge="0" size="40" />
      </van-col>
      <van-col>购物车空空如也，去逛逛</van-col>
    </van-row>
    <van-row type="flex" v-if="disabled" justify="center">
      <van-col>
        <van-button icon="wap-home-o" type="info" round @click="goGoodsList">GO</van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
  data() {
    return {
      total: 0,
      GoodsList: [],
      isLoading: false,
      id: this.$store.state.shopcarId,
      disabled: false
    };
  },
  created: function() {
    this.getGoodsList();
  },
  methods: {
    ...mapMutations(['onTabChange']),
    // position 为关闭时点击的位置
    // instance 为对应的 SwipeCell 实例
    beforeClose({ position, instance }) {
      switch (position) {
        case 'left':
        case 'cell':
        case 'outside':
          instance.close();
          break;
        case 'right':
          instance.close();
          break;
      }
    },
    // 滑动单元格删除
    onbtnclick(id) {
      this.$dialog
        .confirm({
          message: '确定移除该商品吗？'
        })
        .then(() => {
          // 根据条件筛选
          const index = this.GoodsList.findIndex((item, index) => {
            return item.id === id;
          });
          this.$store.state.shopcarId.splice(index, 1);
          this.GoodsList = this.$store.state.shopcarId;
          this.$store.state.shopcarCount = this.GoodsList.length;
          this.getGoodsList();
        })
        .catch(() => {
          this.$toast('取消了删除');
        });
    },
    // 提交订单
    onSubmit() {},
    // 步进器改变
    onChange() {
      this.total = this.isTotal;
    },
    // 获取购物车列表
    async getGoodsList() {
      if (this.id.length === 0) {
        this.GoodsList = [];
        this.disabled = true;
        this.total = this.isTotal;
        return null;
      }
      const data = await this.$http.get(`/api/goods/getshopcarlist/${this.id.join(',')}`);
      this.GoodsList = data.message;
      console.log(this.GoodsList);
      this.$store.state.shopcarCount = this.GoodsList.length;
      this.total = this.isTotal;
    },
    onRefresh() {
      setTimeout(() => {
        this.$toast('刷新成功');
        this.isLoading = false;
      }, 1000);
    },
    // 转到商品列表
    goGoodsList() {
      this.$router.push('/goods/detail');
    },
    // 返回
    onClickLeft() {
      this.$router.push('/goods/detail');
    }
  },
  // 计算属性
  computed: {
    ...mapState(['activeIndex', 'shopcarId', 'shopcarCount']),
    isTotal() {
      var value = 0;
      this.GoodsList.forEach(item => {
        value += parseInt(item.cou) * parseInt(item.sell_price) * 100;
      });
      return parseInt(value);
    }
  }
};
</script>

<style  scoped>
.van-card {
  margin: 10px 0;
}
.goods-card {
  margin: 0;
  background-color: white;
}
.delete-button {
  height: 100%;
}
.shopcarNull {
  margin: 30px 0;
  font-size: 20px;
}
.van-icon {
  margin: 0 10px;
}
.van-nav-bar span {
  color: #ffffff;
}
</style>
